<template>
  <div>
    <!-- 蒙版 -->
    <transition name="fade">
      <div
        v-if="isVisible"
        @click="closedVisible"
        class="w-screen h-screen dark:bg-zinc-800 bg-zinc-900/80 z-40 fixed top-0 left-0"
      ></div>
    </transition>
    <!-- 内容 -->
    <transition name="up">
      <div
        v-if="isVisible"
        class="w-[80%] fixed top-1/3 left-[50%] translate-x-[-50%] z-50 px-2 py-1.5 rounded-sm border dark:border-zinc-600 cursor-pointer bg-white dark:bg-zinc-800 xl:w-[35%]"
      >
        <!-- 标题 -->
        <div class="text-lg font-bold text-zinc-900 dark:text-zinc-200 mb-2">
          {{ props.title }}
        </div>
        <!-- 内容 -->
        <div class="text-base text-zinc-900 dark:text-zinc-200 mb-2">
          {{ props.description }}
        </div>
        <!-- 按钮 -->
        <div class="flex justify-end">
          <m-button type="info" class="mr-2" @click="onCancelClick">
            {{ props.cancelButton }}
          </m-button>
          <m-button type="primary" @click="onConfirmClick">
            {{ props.confirmButton }}
          </m-button>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import mButton from '../button/index.vue'

const props = defineProps({
  // 标题
  title: {
    type: String,
    default: () => '提示'
  },
  // 描述
  description: {
    type: String,
    required: true
  },
  // 取消按钮
  cancelButton: {
    type: String,
    default: () => '取消'
  },
  // 确定按钮
  confirmButton: {
    type: String,
    default: () => '确定'
  },
  // 取消事件
  cancelEvent: {
    type: Function
  },
  // 确定事件
  confirmEvent: {
    type: Function
  },
  // 关闭回调
  closedCallback: {
    type: Function
  }
})
onMounted(() => {
  show()
})
const isVisible = ref(false)

//   关闭延迟动画时间
const closeDelay = '0.5s'
// 关闭蒙版事件
const closedVisible = () => {
  isVisible.value = false
  setTimeout(() => {
    if (props.closedCallback) {
      props.closedCallback()
    }
  }, parseInt(closeDelay.replace('0.', '').replace('s', '')) * 100)
}

//   展示方法
const show = () => {
  isVisible.value = true
}

//   取消按钮事件
const onCancelClick = () => {
  if (props.cancelEvent) {
    props.cancelEvent()
  }
  closedVisible()
}
//   确定按钮事件
const onConfirmClick = () => {
  if (props.confirmEvent) {
    props.confirmEvent()
  }
  closedVisible()
}
</script>
<style scoped lang="scss">
.fade-enter-active,
.fade-leave-active {
  transition: all v-bind(closeDelay);
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.up-enter-active,
.up-leave-active {
  transition: all v-bind(closeDelay);
}

.up-enter-from,
.up-leave-to {
  opacity: 0;
  transform: translate3d(-50%, 100px, 0);
}
</style>
